<template>
	<view class="census">

		<!-- 日历模块 -->
		<view class="calendar">
			<!-- 滚动日历模块 -->
			<view class="v2" v-if="currentIndex == 0">
				<scroll-view scroll-x class="scroll-view" scroll-with-animation :scroll-left="scrollLeft">
					<view class="attach_box">
						<view v-for="(item,index) in dateDate" :key="index" class="attach"
							:class="[item.day==presently.day?'average':'',]"
							@tap="tabSelect(index)" :data-id="index">
								<view>
									<view style="margin-bottom: 8rpx;" v-if="item.day !=presently.day">周{{item.className}}</view>
									<view >
										<text v-if="item.day==presently.day">今日</text>
										<text v-else>{{item.day}}</text>
									</view>
								</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="v2" v-if="currentIndex == 1">
				{{weekDate.start}}---{{weekDate.end}}
			</view>
			<view class="v2" v-if="currentIndex == 2">
				<scroll-view scroll-x class="scroll-view" scroll-with-animation :scroll-left="scrollLeft">
					<view class="attach_box">
						<view v-for="(item,index) in monthDate" :key="index" class="attach"
							:class="[item.day==presently.moon?'average':'',]"
							@tap="tabSelect(index)" :data-id="index">
								<view style="text-align: center;">
									<view style="margin-bottom: 8rpx;" v-if="item.month ==1">{{item.year}}年</view>
									<view>
										<text v-if="item.day==presently.day">本月</text>
										<text v-else>{{item.month}}</text>
									</view>
								</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="v2" v-if="currentIndex == 3">
				<scroll-view scroll-x class="scroll-view" scroll-with-animation :scroll-left="scrollLeft">
					<view class="attach_box">
						<view v-for="(item,index) in yearDate" :key="index" class="attach"
							:class="[item==presently.year ?'average':'',]"
							@tap="tabSelect(index)" :data-id="index">
								<view style="text-align: center;">{{item}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>



	</view>
</template>

<script>
	export default {
		props: {
			currentIndex:{
				type:Number,
				default:0,
			},
			//日期数据
			
		},
		data() {
			return {
				// 周数
				GetCycleData: [],
				// 月份数据
				getYearMonthsData: [],

				// 日历index
				TabCur: 0,
				// 日历滚动偏移量
				scrollLeft: 0,

				//日周月tab的index
				timeSlotDataIdex: 0,

			
				// 年月日对象
				presently: {},
				dateDate:[],
				monthDate:[],
				yearDate:[],
				weekDate:''
			}
		},

		//初始化数据
		watch: {
			
			currentIndex:{
				deep: true,
				immediate: true,
				handler(newValue) {
					console.log('newValue',newValue);
					this.presently = this.sameDay();
					// console.log('this.presently',this.presently);
					// 日历停留到当天
					this.tabSelect(this.presently.day - 1);
					// this.timeSlotDataIdex = newValue;
					this.currentIndex=newValue
					//获取日数据
					this.dateDate=this.getCalendar(this.presently.year,this.presently.moon)
					// //获取月份数据
					this.monthDate = this.getYearMonths();
					//获取年份数据
					this.yearDate=this.getYears(this.presently.year)
					this.weekDate=this.GetCycle(this.presently.year,this.presently.moon,this.presently.day)
					
					
				},
			},
		},


		mounted() {
			// // JS获取自然周数据
			// this.GetCycleData = this.GetCycle();

			
		},




		methods: {
			// 获取当天/年/月/日
			sameDay() {
				let date = new Date();
				if (date.getFullYear() == 1) {
					this.GetCycleData = this.GetCycle();
				}
				return {
					year: date.getFullYear(),
					moon: date.getMonth() + 1,
					day: date.getDate()
				}
			},
			/*闰年 时间判断*/
			isLeap(year) {
				return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
			},
			//获取某月日期
			getCalendar(Year,Month){
				//每个月的天数
				var days_per_month = new Array(31, 28 + this.isLeap(Year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); 
				var dateList = []; 
				
				// 当月天数
				var nowMonthDay = days_per_month[Month - 1]
				// 添加当月日期
				for(var j = 0; j < nowMonthDay; j++) {
					dateList.push({
						day: j+1,
						fromMonth: 'nowMonth',
						className: this.isName(new Date(Year + '/' + Month + '/' + ( j+1)).getDay()),
					})
				}
			   console.log('dateList',dateList);
				return dateList
			},
			isName(index){
				let arr=['日','一','二','三','四','五','六']
				return arr[index]
			},
			// JS获取月份数据
			getYearMonths() {
				const currentDate = new Date();
				const currentYear = currentDate.getFullYear();
				const currentMonth = currentDate.getMonth() + 1;
				const yearMonths = [];
				
				for (let i = 1; i <= 12; i++) {
					const monthObject = {
						month: i,
						year: currentYear,
						isCurrentMonth: i === currentMonth
					};
					yearMonths.push(monthObject);
				}
				console.log('yearMonths',yearMonths);
				return yearMonths;
			},
			/* 获取年 */
			getYears(year){
				console.log(year);
				let  yearList=[]
				
				//当前前三年
				for( var i=3;i>0;i-- ){
					yearList.push(year-i)
				}
				
				//当前向后取20年
				for( var i=0;i<20;i++ ){
					yearList.push(year+i)
				}
				console.log('yearList',yearList);
				return yearList
			},
			// 获取一个月有几个自然周（国外算法，从周天 - 周六 为一个自然周，掐头去尾）
			GetCycle(year,month,day) {
				 let today = new Date();
				    // 计算本周一的日期
				    let weekStart = new Date(today);
				    let dayOfWeek = today.getDay(); // 获取今天是周几，星期天是0，星期一是1，依此类推
				    weekStart.setDate(weekStart.getDate() - dayOfWeek + 1); // 调整为周一的日期
				
				    // 计算本周日的日期
				    let weekEnd = new Date(weekStart);
				    weekEnd.setDate(weekEnd.getDate() + 6); // 从周一加上6天得到周日
				
				    // 格式化日期（YYYY-MM-DD格式）
				    function formatDate(date) {
				        let yyyy = date.getFullYear().toString();
				        let mm = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的，所以需要加1
				        let dd = date.getDate().toString().padStart(2, '0');
				        return `${yyyy}-${mm}-${dd}`;
				    }
				
				    // 返回格式化后的开始和结束日期
					
				    return {
				        start: formatDate(weekStart),
				        end: formatDate(weekEnd)
				    };
			},
			
			 
			
			
			
			
			



			


			
			// 日历滚动
			tabSelect(index) {
				if (index == this.TabCur) return;
				// 赋值index,也就是那一天(日期)
				this.TabCur = index;
				this.scrollLeft = (index - 1) * ( 18);
				this.$emit('changeDate', this.dateDate[index]);
			
			},


		


			

			

			


		}
	}
</script>

<style scoped lang="scss">
	.census {
		overflow: hidden;
		background-color: #eee
	}

	.calendar {
		background-color: #fff;
		box-shadow: 0px 4px 24px 0px #ccc;
		// padding: 20rpx;
		// padding-bottom: 34rpx;

		

		.v2 {
			// margin-top: 30rpx;

			.scroll-view {
				white-space: nowrap;
				/* 防止内容换行 */
			
			}
			.attach_box{
				display: flex;
				align-items: center;
				justify-content: center;
				
			}
			.attach {
				// width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				padding:28rpx 20rpx ;
				// width: 84rpx;
				// height: 84rpx;
				color: #a7a7a7;
				border-radius: 50%;
				// background-color: red;
				font-size: 22rpx;
			}

			.average {
				background: #59beda;
				color: #fff;
			}

			
		}

	

	}
</style>